﻿@using xConnected.Common.ExpertProfile
@using xConnected.Common.Login
<div class="well" style="height: 430px;">
    <div class="row-fluid" style="margin-bottom: 20px">
        <div class="span7">
            <span style="font-size: x-large">@Login.Search</span>
        </div>
        <div class="input-prepend input-append span5">
            <div class="dropdown add-on">
                <a class="dropdown-toggle"
                   data-toggle="dropdown"
                   href="#">
                    <span data-bind="text: $root.searchModel" style="font-size: smaller;"></span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#" style="font-size: smaller" data-bind="click: function(){ $root.setExpertsSearch();}"><span data-bind="css: { 'boldText': $root.searchModel() == 'Experts'}">@Login.Experts</span></a>
                    </li>
                    <li>
                        <a href="#" style="font-size: smaller" data-bind="click: function(){ $root.setCompaniesSearch();}"><span data-bind="css: { 'boldText': $root.searchModel() == 'Companies'}">@Login.Companies</span></a>
                    </li>
                    <li>
                        <a href="#" style="font-size: smaller" data-bind="click: function(){ $root.setPositionsSearch();}"><span data-bind="css: { 'boldText': $root.searchModel() == 'Positions'}">@Login.Positions</span></a>
                    </li>
                </ul>
            </div>
            <a class="add-on"><i class="icon-search"></i></a>
        </div>
    </div>
    <div data-bind="visible: $root.expertsSearchVisible, with: profile">
        <div data-bind="with: profileAdvancedSearch" style="height: 300px">
            <span>@Resources.Country</span>
            <select data-bind="options: $root.availableCountries, optionsText: 'Description',optionsValue: 'Id', value: $root.profile.selectedCountryId"></select>
            <span>@Resources.Industry</span>
            <select data-bind="options: $root.availableIndustries, optionsText: 'Description',optionsValue: 'Id', value: $root.profile.selectedIndustryId"></select>
            <span>@Resources.Category</span>
            <select data-bind="options: $root.availableCategories, optionsText: 'Description',optionsValue: 'Id', value: $root.profile.selectedCategoryId"></select>
            <div data-bind="visible: $root.profile.selectedCategoryId() != -1">
                <span>Subcategory</span>
                <select data-bind="options: $root.availableSubcategories, optionsText: 'Description',optionsValue: 'Id', value: $root.profile.selectedSubcategoryId"></select>
            </div>
            <span>Job type</span>
            <select data-bind="options: $root.profile.availableJobTypes, optionsText: 'Description',optionsValue: 'Value', value: $root.profile.selectedJobType"></select>
        </div>
        <div style="margin-top: 20px; margin-bottom: 20px;">
            <button class="btn btn-small" data-bind="click: function(){$root.profile.resetSimpleSearch(); }"><i class="icon-refresh"></i> Reset search</button>
            <button class="btn btn-small btn-info pull-right" data-bind="click: function(){$root.profile.simpleSearch(); }">@Login.Search</button>
        </div>
        <div style="margin-bottom: 20px;" class="pull-right">
            <a href="#" data-bind="click: function(){ $root.advancedSearch(); }"><small>Advanced search</small></a>
        </div>
    </div>
    <div data-bind="visible: $root.companiesSearchVisible, with: company">
        <div data-bind="with: companyAdvancedSearch" style="height: 300px">
            <span>Country</span>
            <select data-bind="options: $root.availableCountries, optionsText: 'Description',optionsValue: 'Id', value: $root.company.selectedCountryId"></select>
            <span>Industry</span>
            <select data-bind="options: $root.availableIndustries, optionsText: 'Description',optionsValue: 'Id', value: $root.company.selectedIndustryId"></select>
            <span>@Resources.Category</span>
            <select data-bind="options: $root.availableCategories, optionsText: 'Description',optionsValue: 'Id', value: $root.company.selectedCategoryId"></select>
            <div data-bind="visible: $root.profile.selectedCategoryId() != -1">
                <span>Subcategory</span>
                <select data-bind="options: $root.availableSubcategories, optionsText: 'Description',optionsValue: 'Id', value: $root.company.selectedSubcategoryId"></select>
            </div>
        </div>
        <div style="margin-top: 20px; margin-bottom: 20px;">
            <button class="btn btn-small" data-bind="click: function(){$root.company.resetSimpleSearch(); }"><i class="icon-refresh"></i> Reset search</button>
            <button class="btn btn-small btn-info pull-right" data-bind="click: function(){$root.company.simpleSearch(); }">@Login.Search</button>
        </div>
        <div style="margin-bottom: 20px;" class="pull-right">
            <a href="#" data-bind="click: function(){ $root.advancedSearch(); }"><small>Advanced search</small></a>
        </div>
    </div>
    <div data-bind="visible: $root.positionsSearchVisible, with: position">
        <div data-bind="with: positionAdvancedSearch" style="height: 300px">
            <span>Country</span>
            <select data-bind="options: $root.availableCountries, optionsText: 'Description',optionsValue: 'Id', value: $root.position.selectedCountryId"></select>
            <span>Industry</span>
            <select data-bind="options: $root.availableIndustries, optionsText: 'Description',optionsValue: 'Id', value: $root.position.selectedIndustryId"></select>
            <span>@Resources.Category</span>
            <select data-bind="options: $root.availableCategories, optionsText: 'Description',optionsValue: 'Id', value: $root.position.selectedCategoryId"></select>
            <div data-bind="visible: $root.profile.selectedCategoryId() != -1">
                <span>Subcategory</span>
                <select data-bind="options: $root.availableSubcategories, optionsText: 'Description',optionsValue: 'Id', value: $root.position.selectedSubcategoryId"></select>
            </div>
            <span>Contract type</span>
            <select data-bind="options: $root.profile.availableJobTypes, optionsText: 'Description',optionsValue: 'Value', value: $root.position.selectedJobType"></select>
        </div>
        <div style="margin-top: 20px; margin-bottom: 20px;">
            <button class="btn btn-small" data-bind="click: function(){$root.position.resetSimpleSearch(); }"><i class="icon-refresh"></i> Reset search</button>
            <button class="btn btn-small btn-info pull-right" data-bind="click: function(){$root.position.simpleSearch(); }">@Login.Search</button>
        </div>
         <div style="margin-bottom: 20px;" class="pull-right">
            <a href="#" data-bind="click: function(){ $root.advancedSearch(); }"><small>Advanced search</small></a>
        </div>
    </div>
</div>